<template>
    <div class="discount">
        <div class="title">好货特卖</div>
        <div class="snapUp">
            <div>
                <img src="//gw.alicdn.com/tfs/TB1aJmne1SSBuNjy0FlXXbBpVXa-1101-573.png_790x10000.jpg_.webp" alt="">
                <div class="msg">
                    <div class="text">限时抢购</div>
                    <div class="time">
                        <div class="hours">
                            <span>{{hours}}</span>
                        </div>
                        <div class="symbol">:</div>
                        <div class="hours minutes">
                            <span>{{minutes}}</span>
                        </div>
                        <div class="symbol">:</div>
                         <div class="hours seconds">
                            <span>{{seconds}}</span>
                        </div>
                    </div>
                </div>
                <div class="shop">
                    <div v-for="item of list">
                        <img :src="item.img" alt="">
                        <p class="number">{{item.number}}</p>
                        <p class="price">{{item.price}}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="goodsMonopoly">
            <div class="brand brandChange">
                <p class="buy">品牌闪购</p>
                <p class="limited">抢限量五折券</p>
                <div class="brandShop">
                    <div>
                        <img src="//gw.alicdn.com/upload/bao/bao/upload/TB1K2T4QpXXXXXzXpXXwu0bFXXX.png_150x10000.jpg_.webp" alt="">
                        <p class="money">大牌三折起</p>
                        <p class="shopName">舒适达</p>
                    </div>
                    <div>
                        <img src="//gw.alicdn.com/bao/upload/TB1yQKCjvNNTKJjSspkwu1eWFXa.png_150x10000.jpg_.webp" alt="">
                        <p class="money">20点抢神券</p>
                        <p class="shopName">资生堂</p>
                    </div>
                </div>
            </div>
             <div class="brand">
                <p class="buy">上海专享</p>
                <p class="limited">城市惠生活,疯抢超值低价</p>
                <div class="brandShop">
                    <div>
                        <img src="//gw.alicdn.com/tps/i1/725677994/TB2LYtkdYwTMeJjSszfXXXbtFXa_!!725677994.png_150x10000.jpg_.webp" alt="">
                        <p class="money">热销6362件</p>
                        <p class="shopName">￥17.9</p>
                    </div>
                    <div>
                        <img src="//gw.alicdn.com/tps/i2/725677994/TB2wlyFpcLJ8KJjy0FnXXcFDpXa_!!725677994.png_150x10000.jpg_.webp" alt="">
                        <p class="money">爆款次日达</p>
                        <p class="shopName">￥21.9</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default{
        name:"HomeDiscount",
        props:{
            list:Array
        },
        data (){
            return {
                day:"",
                hours:"",
                minutes:"",
                seconds:""
            }
        },
        methods:{
            time(){
                 //获取当前时间
                var date = new Date();
                var now = date.getTime();
                //设置截止时间
                var endDate = new Date("2018-9-5 23:23:23");
                var end = endDate.getTime();
                //时间差
                var leftTime = end - now;
                //定义变量 d,h,m,s保存倒计时的时间
                if (leftTime >= 0) {
                    // var day = "0"+Math.floor(leftTime / 1000 / 60 / 60 / 24);
                    var hours = Math.floor(leftTime / 1000 / 60 / 60 % 24);
                    var minutes = Math.floor(leftTime / 1000 / 60 % 60);
                    var seconds = Math.floor(leftTime / 1000 % 60);
                    if(hours<10){
                        this.hours = "0"+hours
                    }else{
                        this.hours = hours
                    }
                     if(minutes<10){
                        this.minutes = "0"+minutes
                    }else{
                        this.minutes = minutes
                    }
                     if(seconds<10){
                        this.seconds = "0"+seconds
                    }else{
                        this.seconds = seconds
                    }
                    // console.log(this.day)
                    // console.log(this.hours)
                    // console.log(this.minutes)
                    // console.log(this.seconds)
                    // console.log(leftTime/1000/60/60)
                }else{
                    this.hours = "00"
                    this.minutes = "00"
                    this.seconds = "00"
                }
                //递归每秒调用countTime方法，显示动态时间效果
                setTimeout(this.time, 1000);
            }
        },
        mounted (){
            this.time()
        }
    }
</script>

<style lang="stylus" scoped>
.title
    width 3.55rem
    height 0.36rem
    line-height 0.36rem
    margin 0 auto
    color rgb(51, 51, 51)
    font-weight: 600
    font-size 0.18rem
.snapUp
    width 3.75rem
    position relative
    img 
        width 100%
        height 100%  
    .msg
        position absolute
        top 0.06rem
        left 0.1rem
        height 0.48rem
        .text
            float left
            line-height 0.48rem
            font-size 0.17rem
            font-weight: 600;
            margin-left 0.04rem
        .time
            float left
            margin-left 0.06rem  
            margin-top 0.12rem
            .hours
                float left
                width 0.26rem
                height 0.22rem
                text-align center
                line-height 0.24rem 
                border-radius 0.04rem
                background-color #000  
                span
                    color #fff
            .symbol
                float left  
                line-height 0.24rem
                font-weight: 600
    .shop
        position absolute
        top 0.6rem
        left 0.1rem
        width 3.55rem
        height 1.34rem
        div
            float left
            width 25%
            text-align center
            img 
                width 0.72rem
                height 0.72rem     
            .number
                line-height 0.24rem
                color: rgb(255, 28, 77)    
            .price
                line-height 0.14rem
                color: rgb(51, 51, 51)     
.goodsMonopoly
    width 3.55rem
    height 1.78rem
    margin 0 auto
    .brandChange
        margin-right 0.1rem
    .brand
        float left
        width 1.725rem
        height 1.78rem
        background-image: url("//gw.alicdn.com/tfs/TB17VEok49YBuNjy0FfXXXIsVXa-518-533.png?getAvatar=1_360x10000.jpg_.webp")
        background-size: cover
        background-repeat: no-repeat
        .buy
            line-height 0.3rem
            margin-left 0.1rem
            font-size 0.16rem
            font-weight: 600;
            color: rgb(32, 32, 32)
        .limited
            line-height 0.2rem
            margin-left 0.1rem
            font-size 0.14rem
            color: rgb(113, 112, 112)
        .brandShop
            width 100%
            margin-top 0.1rem
            div
                float left
                width 50%
                text-align: center
                img 
                    width 0.725rem
                    height 0.725rem    
                .money
                    font-size: 0.1rem
                    color: rgb(255, 28, 77)
                    line-height: 0.2rem
                .shopName
                    font-size: 0.12rem
                    color: rgb(51, 51, 51)
                    line-height: 0.12rem
</style>

